<template>
  <div v-if="projectList && projectList.length > 0" class="app-main-containers">
    <el-tabs v-model="activeProject" @tab-click="tabChange">
      <el-tab-pane
        v-for="item in projectList"
        :key="item.id"
        :label="item.projectName"
        :name="item.id"
      />
    </el-tabs>
    <div class="ydHead">
      <div class="weeks">
        <div
          :class="
            new Date(weekList[0].old.toLocaleDateString()).getTime() <=
              presentTime
              ? 'no'
              : ''
          "
          @click="
            weekChange(
              1,
              new Date(weekList[0].old.toLocaleDateString()).getTime() <=
                presentTime
            )
          "
        >
          <i class="el-icon-arrow-left" />
        </div>
        <div
          v-for="(weeks, dex) in weekList"
          :key="dex"
          :class="
            new Date(weeks.old.toLocaleDateString()).getTime() < presentTime
              ? 'none'
              : activeDate == weeks.value
                ? 'show on'
                : 'show'
          "
          @click="
            weekClick(
              weeks,
              new Date(weeks.old.toLocaleDateString()).getTime() >= presentTime
            )
          "
        >
          <span>{{ weeks.label.slice(0, 5) }}</span>
          <span>{{
            new Date(weeks.old.toLocaleDateString()).getTime() === presentTime
              ? $t('message.jintian')
              : weeks.label.slice(6, 15)
          }}</span>
        </div>
        <div @click="weekChange(2)"><i class="el-icon-arrow-right" /></div>
      </div>
      <div class="rili">
        <img src="@/icons/png/ic_rili.png">
        <el-date-picker
          v-model="activeDate"
          type="date"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions"
          :placeholder="$t('message.xzrq')"
          :clearable="false"
          class="tmrq"
          @change="getSiteList"
        />
      </div>

      <div class="ztUl">
        <div
          :class="reserveForm && reserveForm.length > 0 && pdYq ? '' : 'none'"
          style="width: 88px"
          @click="reservationShow"
        >
          {{ $t('message.yqpc') }}
        </div>
      </div>
    </div>
    <div class="ydCnt">
      <div v-if="siteListData && siteListData.length > 0" class="site-list-box">
        <div class="time-list">
          <div class="list-item close-all">{{ $t('message.cq') }}</div>
          <div class="list-item close-all" @click="yjkg">
            <img
              src="@/icons/png/ic_light.png"
              style="
                width: 20px;
                vertical-align: middle;
                margin-right: 4px;
                margin-top: -2px;
              "
            >
            <b class="primaryColor" style="font-size: 13px">{{ $t('message.dgkz') }}</b>
          </div>
          <div
            v-for="time in siteListData[0].sites"
            :key="time.id"
            class="list-item time"
          >
            {{ time.beginTime + " - " + time.endTime }}
          </div>
        </div>
        <div
          v-if="
            siteListData &&
              siteListData.length > 0 &&
              siteListData[0].sites &&
              siteListData[0].sites.length > 0
          "
          class="site-list"
        >
          <div v-for="site in siteListData" :key="site.id" class="site-item">
            <div class="list-item site-name">
              <el-popover
                placement="top-start"
                transition="none"
                popper-class="popClass"
                :content="site.siteModelName"
                trigger="hover"
              >
                <span slot="reference">{{ site.siteModelName }} </span>
              </el-popover>
              <img
                v-if="site.pdSc"
                src="@/icons/png/ic_lock.png"
                @click="jsClick_all(site)"
              >
              <img
                v-else
                src="@/icons/png/ic_lock_sel.png"
                @click="suClick_all(site)"
              >
            </div>
            <div
              v-if="site.status"
              class="list-item site-name"
              @click="kgdBtn(site.siteModelId)"
            >
              <img
                src="@/icons/png/ic_light.png"
                style="
                  width: 20px;
                  vertical-align: middle;
                  margin-right: 4px;
                  margin-top: -2px;
                "
              >
              <span style="font-size: 13px; color: #666666">{{ $t('message.kgd') }}</span>
            </div>
            <div
              v-if="!site.status"
              class="list-item site-name"
              style="font-size: 13px; color: #666666"
            >
              {{ $t('message.wbd') }}
            </div>
            <el-popover
              v-for="price in site.sites"
              :key="price.id"
              transition="none"
              placement="top"
              popper-class="popClass"
              :close-delay="closeDelay"
              trigger="hover"
              :content="
                site.siteModelName +
                  ':' +
                  price.beginTime +
                  ' - ' +
                  price.endTime
              "
            >
              <div
                slot="reference"
                class="list-item site-price"
                :class="
                  price.status === '6'
                    ? 'mian'
                    : price.overdue == true
                      ? price.status === '1'
                        ? 'red'
                        : price.status === '2'
                          ? 'green'
                          : 'hui'
                      : price.status === '1' || price.status === '4'
                        ? 'red'
                        : price.status === '2' || price.status === '5'
                          ? 'green'
                          : price.status === '3'
                            ? 'yellow'
                            : price.status === '7' ||
                              price.status === '8' ||
                              price.status === '9' ||
                              price.status === '10'
                              ? 'hui'
                              : ''
                "
                :style="{
                  backgroundColor:
                    siteIds &&
                    siteIds.indexOf(price.id) != -1 &&
                    price.status === '0'
                      ? 'rgba(67, 94, 190, 1)'
                      : '',
                  color:
                    siteIds &&
                    siteIds.indexOf(price.id) != -1 &&
                    price.status === '0'
                      ? '#fff'
                      : '',
                }"
                @click="
                  ccClick(
                    price,
                    site.siteModelName,
                    site.siteModelId,
                    site,
                    price
                  )
                "
              >
                <div slot="reference">
                  <div v-if="price.status !== '3'" style="text-align: center">
                    {{
                      price.fromFlag === "0"
                        ? $t('message.kuoc')
                        : price.fromFlag === "1"
                          ? $t('message.kuoh')
                          : price.fromFlag === "2"
                            ? $t('message.kuog')
                            : ""
                    }}{{
                      price.status === "6"
                        ? $t('message.mianfei')
                        : price.nickName
                          ? price.nickName
                          : price.price
                    }}
                  </div>
                  <div
                    v-if="price.status !== '3' && price.userPhone"
                    style="text-align: center"
                  >
                    {{ price.userPhone }}
                  </div>
                  <img
                    v-if="price.status == '3'"
                    src="@/icons/png/ic_lock_white.png"
                    style="width: 20px"
                  >
                  <img
                    v-if="siteIds && siteIds.indexOf(price.id) != -1"
                    src="@/icons/png/yuding_ic_select@2x.png"
                    class="xzXb"
                  >
                </div>
              </div>
            </el-popover>
          </div>
        </div>
        <div
          v-else
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
          "
        >
          <img
            src="@/icons/png/default_nodata.png"
            style="width: 240px; display: block"
          >
        </div>
      </div>
      <div
        v-else
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          height: 100%;
        "
      >
        <img
          src="@/icons/png/default_nodata.png"
          style="width: 240px; display: block"
        >
      </div>
    </div>
    <div class="ydFood">
      <div class="colorList">
        <div
          v-for="color in colorList.slice(0, 5)"
          :key="color.id"
          class="color-item"
        >
          <div class="number" :style="'background-color: ' + color.number" />
          <div class="name">{{ color.name }}</div>
        </div>
      </div>
    </div>
    <Reservation ref="reservationTc" @yqSccess="getSiteList" />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { parseTime } from '@/utils/index'
import {
  siteList,
  getProjectList,
  batchSiteLockStatus,
  devSiteLine
} from '@/api'
import store from '@/store'
import Reservation from './components/reservation.vue' // 约球
export default {
  components: {
    Reservation
  },
  data() {
    return {
      modalDialog: store.getters.dialog,
      authCode: '',
      mapWeek: [this.$t('message.z7'), this.$t('message.z1'), this.$t('message.z2'), this.$t('message.z3'), this.$t('message.z4'), this.$t('message.z5'), this.$t('message.z6')],
      pickerOptions: {
        disabledDate(time) {
          return (
            time.getTime() < new Date(new Date().toLocaleDateString()).getTime()
          )
        }
      },
      presentTime: new Date(new Date().toLocaleDateString()).getTime(),
      colorList: [
        { id: 1, name: this.$t('message.kycd'), number: 'rgba(244, 247, 252, 1)' },
        { id: 2, name: this.$t('message.cdsc'), number: 'rgba(251, 188, 38, 1)' },
        { id: 3, name: this.$t('message.ydwf'), number: 'rgba(237, 77, 0, 1)' },
        { id: 4, name: this.$t('message.ydyf'), number: 'rgba(34, 179, 107, 1)' },
        { id: 5, name: this.$t('message.gqcd'), number: 'rgba(204, 204, 204, 1)' },
        { id: 6, name: this.$t('message.mfcd'), number: 'rgb(61,206,209)' }
      ],
      projectList: [],
      closeDelay: 0,
      activeProject: '',
      activeDate: '',
      activeArea: '',
      siteListData: [],
      weekList: [],
      currentDate: '',
      details: {},
      operation: false,
      overdue: false,
      overDues: [],
      status: '',
      siteIds: [],
      siteId: '',
      editPd: false,
      reserveForm: [],
      userType: 0,
      zprice: '',
      week: [],
      reserveAndOrderId: '',
      member: '',
      change: 0,
      meta: [],
      code: '',
      orderId: '',
      pdYq: false
    }
  },
  created() {
    this.activeDate = this.formatDate(new Date()).value
    this.setDate(new Date())
    this.toGetProjectList()
    this.meta = this.$route.meta.buttons || []
  },
  activated() {
    if (this.activeProject) {
      this.getSiteList()
    }
  },
  methods: {
    yjkg() {
      const that = this
      const venueId = sessionStorage.getItem('venueId')
      const siteListData = this.siteListData
      const siteId = []
      siteListData.forEach((e) => {
        siteId.push(e.siteModelId)
      })
      this.$confirm(this.$t('message.qxzyjkd'), this.$t('message.ts'), {
        distinguishCancelAndClose: true,
        confirmButtonText: this.$t('message.yjgd'),
        cancelButtonText: this.$t('message.yjkd'),
        type: 'warning'
      })
        .then(() => {
          devSiteLine({ param: { siteId, venueId, status: '1' }})
            .then((res) => {
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.yjgdcg'))
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch((action) => {
          if (action === 'cancel') {
            devSiteLine({ param: { siteId, venueId, status: '0' }})
              .then((res) => {
                if (res.errorCode === '000000') {
                  that.$message.success(this.$t('message.yjkdcg'))
                }
              })
              .catch((err) => {
                console.log(err)
              })
          }
        })
    },
    kgdBtn(siteId) {
      const that = this
      this.$confirm(this.$t('message.qxzcgkdg'), this.$t('message.ts'), {
        distinguishCancelAndClose: true,
        confirmButtonText: this.$t('message.gd'),
        cancelButtonText: this.$t('message.kd'),
        type: 'warning'
      })
        .then(() => {
          const venueId = sessionStorage.getItem('venueId')
          devSiteLine({ param: { siteId: [siteId], venueId, status: '1' }})
            .then((res) => {
              if (res.errorCode === '000000') {
                that.$message.success(this.$t('message.gdcg'))
              }
            })
            .catch((err) => {
              console.log(err)
            })
        })
        .catch((action) => {
          if (action === 'cancel') {
            const venueId = sessionStorage.getItem('venueId')
            devSiteLine({ param: { siteId: [siteId], venueId, status: '0' }})
              .then((res) => {
                if (res.errorCode === '000000') {
                  that.$message.success(this.$t('message.kdcg'))
                }
              })
              .catch((err) => {
                console.log(err)
              })
          }
        })
    },
    // 获取星期
    calculation(s) {
      return s < 10 ? '0' + s : s
    },
    formatDate(date) {
      const year = date.getFullYear() + '-'
      const month = this.calculation(date.getMonth() + 1) + '-'
      const day = this.calculation(date.getDate())
      const week = [this.$t('message.z7'), this.$t('message.z1'), this.$t('message.z2'), this.$t('message.z3'), this.$t('message.z4'), this.$t('message.z5'), this.$t('message.z6')][
        date.getDay()
      ]
      return {
        label: month + day + ' ' + week,
        value: year + month + day,
        old: new Date(date)
      }
    },
    weekClick(e, pd) {
      if (pd) {
        this.activeDate = e.value
        this.currentDate = e.old
        this.getSiteList(2)
      }
    },
    addDate(date, n) {
      date.setDate(date.getDate() + n)
      return date
    },
    setDate(date) {
      var week = date.getDay() - 1
      if (week === -1) {
        week = 6
      }
      this.currentDate = new Date(date)
      const arr = []
      for (var i = 0; i < 7; i++) {
        arr[i] = this.formatDate(i === 0 ? date : this.addDate(date, 1))
      }
      this.weekList = arr
    },
    weekChange(e, b) {
      const mapWeek = this.mapWeek
      if (e === 1) {
        if (!b) {
          this.weekList.forEach((item) => {
            item.label =
              dayjs(item.value).subtract(7, 'day').format('MM-DD') +
              ' ' +
              mapWeek[dayjs(item.value).day()]
            item.value = dayjs(item.value)
              .subtract(7, 'day')
              .format('YYYY-MM-DD')
            item.old = new Date(item.old.getTime() - 604800000)
          })
          if (new Date(this.weekList[0].old.toLocaleDateString()).getTime() <= this.presentTime) {
            this.activeDate = parseTime(new Date(this.presentTime)).slice(0, 10)
            this.getSiteList()
          } else {
            this.activeDate = this.weekList[0].value
            this.getSiteList()
          }
        }
      } else {
        this.weekList.forEach((item) => {
          item.label =
            dayjs(item.value).add(7, 'day').format('MM-DD') +
            ' ' +
            mapWeek[dayjs(item.value).day()]
          item.value = dayjs(item.value).add(7, 'day').format('YYYY-MM-DD')
          item.old = new Date(item.old.getTime() + 604800000)
        })
        this.activeDate = this.weekList[0].value
        this.getSiteList()
      }
    },
    // 星期结束
    // 全部锁定
    suClick_all(obj) {
      this.details = {}
      this.reserveAndOrderId = ''
      const siteIds = []
      const overDues = []
      const reserveForm = []
      const ul = obj.sites
      ul.forEach(e => {
        if (e.status === '0' && !e.overdue) {
          siteIds.push(e.id)
          overDues.push(e.overdue)
          reserveForm.push({ ...e, name: obj.siteModelName, siteModelId: obj.siteModelId })
        }
      })
      this.siteIds = siteIds
      this.overDues = overDues
      this.reserveForm = reserveForm
      const that = this
      if (reserveForm.length > 0) {
        this.operation = true
        this.$confirm(
          this.$t('message.qrsydqkycdtc'),
          this.$t('message.suochan'),
          {
            confirmButtonText: this.$t('message.qd'),
            cancelButtonText: this.$t('message.qx'),
            type: 'warning',
            callback: () => { },
            beforeClose: (action, ctx, close) => {
              if (action !== 'confirm') {
                close()
                return
              }
              ctx.confirmButtonLoading = true
              batchSiteLockStatus({ param: { type: '0', siteIds, projectId: that.activeProject }}).then((res) => {
                ctx.confirmButtonLoading = false
                close()
                if (res.errorCode === '000000') {
                  that.$message.success(this.$t('message.sccg2'))
                  that.getSiteList()
                  that.operation = false
                }
              })
                .catch(() => { ctx.confirmButtonLoading = false })
            }
          }).finally(() => { })
      } else {
        this.operation = false
      }
    },
    // 全部解锁
    jsClick_all(obj) {
      this.details = {}
      this.reserveAndOrderId = ''
      const siteIds = []
      const overDues = []
      const reserveForm = []
      const ul = obj.sites
      const that = this
      ul.forEach(e => {
        if (e.status === '3' && !e.overdue) {
          siteIds.push(e.id)
          overDues.push(e.overdue)
          reserveForm.push({ ...e, name: obj.siteModelName, siteModelId: obj.siteModelId })
        }
      })
      this.siteIds = siteIds
      this.overDues = overDues
      this.reserveForm = reserveForm
      if (reserveForm.length > 0) {
        this.operation = true
        this.$confirm(
          this.$t('message.qrjscctc'),
          this.$t('message.jiesuo'),
          {
            confirmButtonText: this.$t('message.qd'),
            cancelButtonText: this.$t('message.qx'),
            type: 'warning',
            callback: () => { },
            beforeClose: (action, ctx, close) => {
              if (action !== 'confirm') {
                close()
                return
              }
              ctx.confirmButtonLoading = true
              batchSiteLockStatus({ param: { type: '1', siteIds, projectId: that.activeProject }}).then((res) => {
                ctx.confirmButtonLoading = false
                close()
                if (res.errorCode === '000000') {
                  that.$message.success(this.$t('message.jscg'))
                  that.getSiteList()
                  that.operation = false
                }
              })
                .catch(() => { ctx.confirmButtonLoading = false })
            }
          }).finally(() => { })
      } else {
        this.operation = false
      }
    },
    // ccClick
    ccClick(e, name, id, cnt, b) {
      if (e.status === '6' || e.status === '7' || e.status === '8' || e.status === '9' || e.status === '10') return false
      this.status = e.status
      this.siteId = e.id
      this.overdue = e.overdue
      let siteIds = [...this.siteIds]
      let overDues = [...this.overDues]
      let reserveForm = [...this.reserveForm]
      let pdYq = true
      if (siteIds.length === 0) {
        siteIds = [e.id]
        overDues = [e.overdue]
        reserveForm = [{ ...e, name: name, siteModelId: id }]
        pdYq = true
      } else {
        let pd = true
        for (let num = 0; num < reserveForm.length; num++) {
          if (
            reserveForm[num].id === e.id &&
            reserveForm.length > 0
          ) {
            reserveForm.splice(num, 1)
            siteIds.splice(num, 1)
            overDues.splice(num, 1)
            pd = false
          }
        }
        if (pd) {
          siteIds.push(e.id)
          overDues.push(e.overdue)
          reserveForm.push({ ...e, name: name, siteModelId: id })
          reserveForm.forEach(m => {
            if (m.siteModelId !== id) {
              pdYq = false
            }
          })
        }
      }
      reserveForm = reserveForm.sort(this.compareSort('sort', 1))
      this.reserveForm = reserveForm
      const sortList = reserveForm.map(s => s.sort)
      if (this.isContinuityNum(sortList)) {
        this.pdYq = pdYq
      } else {
        this.pdYq = false
      }
      this.siteIds = siteIds
      this.overDues = overDues
      if (reserveForm.length > 0) {
        this.status = reserveForm[0].status
        this.siteId = reserveForm[0].id
        this.overdue = reserveForm[0].overdue
      }
      let zprice = 0
      if (reserveForm.length === 0) {
        this.operation = false
        this.details = {}
      } else {
        let operation = true
        let orderIdPd = true
        const paStatus = reserveForm[0].status
        const orderId = reserveForm[0].orderId || ''
        reserveForm.forEach(k => {
          if (paStatus !== k.status) {
            operation = false
          }
          if (!orderId || orderId !== k.orderId) {
            orderIdPd = false
          }
          zprice = zprice + k.price
        })
        this.orderId = orderId
        if (reserveForm.length > 1 && (reserveForm[0].status === '1' || reserveForm[0].status === '2' || reserveForm[0].status === '4' || reserveForm[0].status === '5')) {
          if (orderIdPd) {
            this.operation = true
          } else {
            this.operation = false
          }
        } else {
          this.operation = operation
        }

        if (!orderIdPd) {
          this.details = {}
          this.reserveAndOrderId = ''
        }
      }
      this.zprice = zprice.toFixed(2)
    },
    // 判断一串数字是否是连续的
    isContinuityNum(num) {
      let array = []
      if (num instanceof Array) {
        array = [...num]
      } else {
        array = Array.from(num.toString())// 转换为数组
      }

      var i = array[0]
      var isContinuation = true
      for (var e in array) {
        if (array[e] !== i) {
          isContinuation = false
          break
        }
        i++
      }
      return isContinuation
    },
    compareSort(property, sortType) {
      return function(obj1, obj2) {
        var value1 = obj1[property]
        var value2 = obj2[property]
        return (value1 - value2) * sortType
      }
    },
    // 约球
    reservationShow() {
      if (this.reserveForm && this.reserveForm.length > 0 && this.pdYq) {
        this.$refs.reservationTc.open(
          {
            reserveForm: this.reserveForm,
            price: this.zprice,
            projectId: this.activeProject
          }
        )
      }
    },
    toGetProjectList() {
      const venueId = sessionStorage.getItem('venueId')
      getProjectList({ param: { venueId, status: '1', type: '0' }}).then(
        (res) => {
          if (res.errorCode === '000000') {
            this.projectList = res.recordList || []
            if (res.recordList && res.recordList.length > 0 && res.recordList[0].id) {
              this.activeProject = res.recordList[0].id
              this.getSiteList()
            }
          }
        }
      )
    },
    // 项目切换
    tabChange(tab) {
      this.activeProject = tab.name
      this.activeArea = ''
      this.getSiteList()
    },
    // 获取场次列表
    getSiteList(e) {
      this.operation = false
      this.details = {}
      this.siteIds = []
      this.reserveForm = []
      const { activeArea: areaId, activeProject: projectId, activeDate } = this
      this.currentDate = new Date(activeDate)
      const day = parseTime(activeDate).slice(0, 10)
      this.orderId = ''
      siteList({ param: { areaId, projectId, day, flag: '1' }}).then((res) => {
        this.siteListData = res.recordList
        if (res.errorCode === '000000') {
          const siteListData = res.recordList || []
          this.siteListData = this.pdsite(siteListData)
        }
      })
      if (e !== 2) {
        this.setDate(new Date(activeDate))
      }
    },
    pdsite(siteListData) {
      const arrb = [...siteListData]
      arrb.forEach((v) => {
        let pd = false
        const site = v.sites || []
        site.forEach((e) => {
          if (e.status === '3') {
            pd = true
          }
        })
        site.forEach((e) => {
          if (e.status === '0' && !e.overdue) {
            pd = false
          }
        })

        v.pdSc = pd
      })
      return arrb
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.app-main-containers {
  padding-top: 10px;
  overflow: hidden;
  position: relative;
  height: calc(100vh - 285px);

  .ydCnt {
    overflow-y: auto;
    overflow-x: auto;
    margin-top: 20px;
    width: 100%;
    height: calc(100% - 220px);
  }

  .ydFood {
    height: 50px;
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #ffffff;
    box-shadow: 0px -1px 0px 0px #f1f1f1;

    .colorList {
      padding-left: 30px;
      flex: none;
      height: 50px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .color-item {
        margin-right: 20px;
        display: flex;
        align-items: center;
        padding: 10px 0;

        .number {
          width: 20px;
          height: 20px;
          border-radius: 4px;
          margin-right: 10px;
        }

        .name {
          height: 20px;
          font-size: 13px;
          line-height: 20px;
        }
      }
    }
  }

  .ydHead {
    display: flex;
    height: 82px;
    align-items: center;

    .memberDetail {
      flex: 1;
      border-left: 1px solid #dfe2e8;
      padding-left: 20px;
      display: flex;

      img {
        margin-right: 10px;
      }

      .memberRight {
        flex: 1;
        display: flex;
        height: 82px;
        flex-wrap: wrap;
        max-width: 400px;

        div {
          width: 50%;
          font-size: 13px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          margin-bottom: 0;
          color: #222222;
          line-height: 20px;
          height: 20px;
          max-width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;

          &.ckxq {
            cursor: pointer;
            color: $primaryColor;
          }

          span {
            color: $SecondColor;
            font-weight: bold;
          }
        }
      }
    }

    .weeks {
      display: flex;
      flex: none;
      width: 482px;
      align-items: center;
      margin-right: 20px;

      div {
        text-align: center;
        height: 36px;
        line-height: 36px;
        cursor: pointer;
        background: #f4f7fc;
        border-radius: 2px;

        &:first-of-type {
          width: 30px;
          margin-right: 6px;
          flex: none;

          &.no {
            color: rgb(170, 170, 170);
            cursor: not-allowed;
          }
        }

        &:last-of-type {
          width: 30px;
          margin-left: 10px;
        }

        &.show {
          width: 54px;
          height: 82px;
          background: #f4f7fc;
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          margin-left: 4px;

          &.on,
          &:hover {
            color: $primaryColor;
            border: 1px solid $primaryColor;
          }
        }

        &.none {
          background-color: rgb(170, 170, 170);
          color: #fff;
          cursor: not-allowed;
          width: 54px;
          height: 82px;
          border-radius: 2px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-direction: column;
          margin-left: 4px;
        }

        span {
          width: 100%;
          text-align: center;
          display: inline-block;
          line-height: 1.5;
        }
      }
    }

    .rili {
      width: 24px;
      height: 24px;
      margin-right: 20px;
      position: relative;

      img {
        width: 24px;
        height: 24px;
      }

      .tmrq {
        width: 24px;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 10;
        height: 24px;
        opacity: 0;
      }
    }

    .searchForm {
      margin-right: 20px;
      width: 200px;
      flex: none;
    }

    .mb10 {
      margin-bottom: 10px;
    }

    .ztUl {
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
      box-sizing: border-box;
      padding-right: 10px;
      width: 360px;
      height: 82px;
      flex: none;

      div {
        width: 60px;
        height: 36px;
        color: #fff;
        text-align: center;
        line-height: 36px;
        background: $primaryColor;
        border-radius: 2px;
        cursor: pointer;
        margin-right: 10px;

        &.none {
          background: #cccccc;
        }
      }
    }
  }

  .reserve,
  .reserve-info {
    background-color: #fff;
    max-height: calc(100vh - 144px);
    overflow-y: auto;
    padding: 30px;
  }

  .reserve {
    flex: 1;
    overflow: hidden;
  }

  .date-legend {
    display: flex;
    margin-bottom: 30px;
    overflow-x: auto;
    overflow-y: hidden;

    > * {
      margin-right: 20px;
    }

    .color-list {
      margin-right: 0;
      width: 550px;
      flex: none;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-wrap: wrap;
      margin: -10px 0;

      .color-item {
        margin-left: 20px;
        display: flex;
        align-items: center;
        padding: 10px 0;

        .number {
          width: 20px;
          height: 20px;
          border-radius: 4px;
          margin-right: 10px;
        }

        .name {
          height: 20px;
          font-size: 13px;
          line-height: 20px;
        }
      }
    }
  }

  .week {
    display: flex;
    margin-bottom: 20px;

    span {
      flex: 1;
      text-align: center;
      height: 40px;
      line-height: 40px;
      cursor: pointer;
      background: #f4f7fc;
      border-radius: 2px;
      margin-right: 12px;

      &:first-of-type {
        width: 28px;
        flex: none;

        &.no {
          color: #cccccc;
          cursor: not-allowed;
        }
      }

      &:last-of-type {
        width: 28px;
        flex: none;
        margin-right: 0;
      }

      &.show {
        &.on,
        &:hover {
          color: #fff;
          background-color: $primaryColor;
        }
      }

      &.none {
        background-color: rgb(170, 170, 170);
        color: #fff;
        cursor: not-allowed;
      }
    }
  }

  .site-list-box {
    display: flex;
    position: relative;
    padding-left: 120px;

    .time-list {
      width: 120px;
      position: absolute;
      left: 0;
      top: 0;
    }

    .list-item {
      border: 1px solid transparent;
      width: 120px;
      height: 40px;
      background-position: right bottom;
      background-size: 20px 20px;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 5px;
      cursor: pointer;
      background-color: rgba(244, 247, 252, 1);
      font-size: 14px;

      &.close-all,
      &.time {
        background-color: #f5f5f5;
        white-space: nowrap;
        text-overflow: ellipsis;
        -webkit-text-overflow: ellipsis;
        overflow: hidden;
        display: block;
        line-height: 40px;
        text-align: center;
      }

      &.time {
        font-size: 15px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
      }

      &.site-name {
        background-color: #f5f5f5;
        display: block;
        line-height: 40px;
        padding: 0 5px;
        text-align: center;
        display: flex;
        justify-content: center;

        span {
          white-space: nowrap;
          text-overflow: ellipsis;
          -webkit-text-overflow: ellipsis;
          overflow: hidden;
        }

        img {
          width: 20px;
          vertical-align: middle;
          margin-left: 5px;
          margin-top: -2px;
          flex: none;
        }
      }
    }

    .wzred {
      color: rgba(237, 77, 0, 1);
    }

    .site-price {
      color: #333333;
      position: relative;
    }

    .yellow {
      color: #fff;
      background-color: rgba(251, 188, 38, 1);
    }

    .blue {
      color: #fff;
      background-color: rgb(61, 206, 209);
    }

    .red {
      color: #fff !important;
      background-color: rgba(237, 77, 0, 1);
    }

    .green {
      color: #fff;
      background-color: rgba(34, 179, 107, 1);
    }

    .hui {
      color: #fff;
      background-color: rgba(204, 204, 204, 1);
    }

    .mian {
      color: $primaryColor;
    }

    .site-list {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      display: flex;

      .site-item {
        width: 120px;
        margin-left: 5px;
      }
    }
  }

  .reserve-info {
    width: 310px;
    margin-left: 30px;

    .information {
      background: #f4f7fc;
      border-radius: 8px;
      padding: 20px;
      box-sizing: border-box;
      font-size: 16px;
      line-height: 2;
    }

    .reserveBtn {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      div {
        width: 110px;
        height: 48px;
        margin-top: 20px;
        color: #fff;
        text-align: center;
        line-height: 48px;
        background: $primaryColor;
        border-radius: 4px;
        cursor: pointer;

        // &:nth-child(odd) {
        //   margin-right: 10px;
        // }
        &.none {
          background: #cccccc;
        }
      }
    }
  }
}

.member {
  background-color: rgba(67, 94, 190, 0.1);
  padding: 20px;

  .cont {
    display: flex;

    div {
      margin-right: 20px;
      font-size: 16px;
      line-height: 1.5;

      &.lx {
        border: 1px #999 solid;
        border-radius: 4px;
        background-color: #fff;
        padding: 0 20px;
      }

      span {
        color: rgb(170, 170, 170);
      }
    }
  }
}

.xzXb {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 24px;
}
</style>
